1. code

import React, {useState} from "react";
import Image from "next/image";

function ImageFold(){
    //使用useState hook來創建一個叫做isImageVisible的狀態變量
    //初始狀態為false，表示圖片默認是隱藏的
    const [isImageVisible, setIsImageVisible]=useState(false);
    //用於切換圖片的可見性，當按鈕被點擊時，這個函數會被調用
    const toggleImage=()=>{
        setIsImageVisible(!isImageVisible);
        //使用!操作符來反轉當前的狀態
    };
    return(
        <div>//創建一個按鈕，點擊時觸發toggleImage函數
            <button onClick={toggleImage}>
            {isImageVisible ? 'Hide' : 'Display'}
            //根據isImageVisible的狀態顯示不同文本按鈕
            </button>
            {isImageVisible && (<Image src="/haruurara.jpg" alt="uma" width={300} height={200}/>)}
            </div>
    );
}
export default ImageFold;

2.實例
點擊按鈕前

點擊按鈕後